// 蛇动思路:先删除一个x轴 在增加一个x轴+1

function Snake(el){
    // 保存地图
    this.el=el
    // 保存蛇节的高度宽度
    this.length=20
    // 保存蛇的几节对象
    this.snakeObj=[
        {x:4,y:0,color:'red',box:null},
        {x:3,y:0,color:'black',box:null},
        {x:2,y:0,color:'black',box:null},
        {x:1,y:0,color:'black',box:null}
    ]
    // 设置舌头指向默认值
    this.direction='right'
    
}



// 清除蛇
Snake.prototype.snakeremove=function(){
    // 1.遍历
    for(let i=0;i<this.snakeObj.length;i++){
        // 2.遍历中,清除蛇
        if(this.snakeObj[i].box){
            // console.log(this.snakeObj[i].box);
            this.el.removeChild(this.snakeObj[i].box)
           
        }
        
    }
}
// 创建蛇,设置蛇的属性
Snake.prototype.create=function(){
    // 调用清除蛇
    this.snakeremove()
    // 遍历创建蛇
    for(let i=0;i<this.snakeObj.length;i++){
        // 1.创建蛇标签对象
        let div1Obj=document.createElement('div')
        // 设置高度宽度颜色
        div1Obj.style.width=this.length+'px'
        div1Obj.style.height=this.length+'px'
        div1Obj.style.position='absolute'
        div1Obj.style.left=this.snakeObj[i].x*this.length
        div1Obj.style.top=this.snakeObj[i].y*this.length
        div1Obj.style.background=this.snakeObj[i].color
        // 保存蛇节
        this.snakeObj[i].box=div1Obj
        // 追加到地图的页面中
        this.el.appendChild(div1Obj)
        }
}
// 蛇动
Snake.prototype.snakemove=function(){
    // 蛇头后面的蛇节
    for (let i = this.snakeObj.length - 1; i>0; i--) {
        // console.log(this.snakeObj[i])
        this.snakeObj[i].x = this.snakeObj[i-1].x
        this.snakeObj[i].y = this.snakeObj[i-1].y
    }
    // 蛇头指向
    switch (this.direction) {
        case 'top':
            this.snakeObj[0].y -= 1
            break;
        case 'bottom':
            this.snakeObj[0].y += 1
            break;
        case 'left':
            this.snakeObj[0].x -= 1
            break;
        case 'right':
            this.snakeObj[0].x += 1
            break;
    }

    // 然后重新创建
    this.create()

}



